package com.csw.compose.ui.module.component

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.onPreviewKeyEvent
import androidx.compose.ui.input.key.type
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import com.csw.compose.App.Companion.SHOW_APP_TOAST
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.MiniSpacer
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage

@Preview(widthDp = 360, heightDp = 2000)
@Composable
fun ModifierPreview() {
    BasePage({}, "修饰符") { ModifierPage() }
}

@Composable
fun Size() {
    Column {
        UlItem("size")
        BodyText("自适应(默认)")
        Row(verticalAlignment = Alignment.CenterVertically) {
            Box(Modifier.alpha(0.1f).background(Color.Red)) {
                Text("自适应内容大小", color = Color.White)
            }
        }
        BodyText("固定尺寸")
        Row(verticalAlignment = Alignment.CenterVertically) {
            LabelText("size,width,height")
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            MiniSpacer()
            Box(
                Modifier
                    .width(80.dp)
                    .height(40.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
        }
        NormalSpacer()
        BodyText("填充")
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .height(40.dp)
                .fillMaxWidth()
        ) {
            LabelText("fillMaxSize")
            Box(
                Modifier
                    .width(80.dp)
                    .fillMaxHeight()
                    .background(Color.Red)
                    .padding(10.dp)
            ) {
                Box(
                    Modifier
                        .fillMaxSize()
                        .background(Color.Yellow)
                )
            }
        }
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .height(40.dp)
                .fillMaxWidth()
        ) {
            LabelText("fillMaxWidth,fillMaxHeight")
            Box(
                Modifier
                    .fillMaxWidth()
                    .fillMaxHeight()
                    .alpha(0.1f)
                    .background(Color.Red)
            )
        }
        BodyText("限制(最大值、最小值)")
        Row(verticalAlignment = Alignment.CenterVertically) {
            LabelText("sizeIn,widthIn,heightIn")
            Box(
                Modifier
                    .widthIn(40.dp, 80.dp)
                    .background(Color.Red)
            ) {
                Text("123456789012345678901234567890", color = Color.Yellow)
            }
            MiniSpacer()
            Box(
                Modifier
                    .width(80.dp)
                    .heightIn(40.dp, 80.dp)
                    .background(Color.Red)
            ) {
                Text("1234567890", color = Color.Yellow)
            }
        }
        BodyText("比例（已知宽度或高度，按照比例计算另一个值）")
        Row(verticalAlignment = Alignment.CenterVertically) {
            LabelText("aspectRatio")
            Box(
                Modifier
                    .width(40.dp)
                    .aspectRatio(1f)
                    .background(Color.Red)
            ) {
                Text("1:1", color = Color.Yellow)
            }
            MiniSpacer()
            Box(
                Modifier
                    .height(40.dp)
                    .aspectRatio(1.5f)
                    .background(Color.Red)
            ) {
                Text("1.5:1", color = Color.Yellow)
            }
        }
    }
}

@Composable
fun Padding() {
    Column {
        UlItem("padding")
        Row(verticalAlignment = Alignment.CenterVertically) {
            LabelText("外边距")
            Box(Modifier.background(Color.Red)) {
                Box(
                    Modifier
                        .padding(10.dp)
                        .size(40.dp)
                        .background(Color.Yellow)
                )
            }
        }
        Row(verticalAlignment = Alignment.CenterVertically) {
            LabelText("内边距")
            Box(
                Modifier
                    .background(Color.Red)
                    .size(40.dp)
                    .padding(10.dp)
            ) {
                Box(
                    Modifier
                        .background(Color.Yellow)
                        .fillMaxSize()
                )
            }
        }
        BodyText("先于size设置则为外边距，后于size设置则为内边距")
    }
}

@Composable
fun Background() {
    UlItem("background")
    Row {
        Box(
            Modifier
                .size(40.dp)
                .background(Color.Red)
        )
        Box(
            Modifier
                .size(40.dp)
                .background(Color.Green)
        )
        Box(
            Modifier
                .size(40.dp)
                .background(Color.Blue)
        )
    }
    BodyText("设置背景色，会受padding影响，若外边距的场景，则background应该后于padding设置")
}

@Composable
fun Border() {
    UlItem("border")
    Row(verticalAlignment = Alignment.CenterVertically) {
        LabelText("边框")
        Box(
            Modifier
                .size(40.dp)
                .border(2.dp, Color.Gray)
        )
    }
    Row(verticalAlignment = Alignment.CenterVertically) {
        LabelText("裁角")
        Box(
            Modifier
                .size(40.dp)
                .border(2.dp, Color.Gray, CutCornerShape(10.dp))
        )
        Box(
            Modifier
                .size(40.dp)
                .border(2.dp, Color.Gray, CutCornerShape(topStart = 10.dp))
        )
        Box(
            Modifier
                .size(40.dp)
                .border(2.dp, Color.Gray, CutCornerShape(topStartPercent = 50))
        )
    }
    Row(verticalAlignment = Alignment.CenterVertically) {
        LabelText("圆角")
        Box(
            Modifier
                .size(40.dp)
                .border(2.dp, Color.Gray, RoundedCornerShape(10.dp))
        )
        Box(
            Modifier
                .size(40.dp)
                .border(2.dp, Color.Gray, RoundedCornerShape(topStart = 10.dp))
        )
        Box(
            Modifier
                .size(40.dp)
                .border(2.dp, Color.Gray, RoundedCornerShape(topStartPercent = 50))
        )
    }
    BodyText("设置边框")
}

@Composable
fun Transform() {
    UlItem("变换")
    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        LabelText("alpha")
        Box(
            Modifier
                .size(40.dp)
                .alpha(0.1f)
                .background(Color.Red)
        )
    }
    Row(
        verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(bottom = 10.dp)
    ) {
        LabelText("offset")
        Box(
            Modifier
                .size(40.dp)
                .offset(10.dp, 10.dp)
                .alpha(0.1f)
                .background(Color.Red)
        )
    }
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(bottom = 4.dp, top = 4.dp)
    ) {
        LabelText("scale")
        Box(
            Modifier
                .size(40.dp)
                .offset(x = 4.dp)
                .scale(1.2f)
                .alpha(0.1f)
                .background(Color.Red)
        )
    }
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(top = 20.dp * 0.414f, bottom = 20.dp * 0.414f)
    ) {
        LabelText("rotate")
        Box(
            Modifier
                .size(40.dp)
                .offset(x = 20.dp * 0.414f)
                .rotate(45f)
                .alpha(0.1f)
                .background(Color.Red)
        )
    }
}

@Composable
fun Event() {
    UlItem("事件")
    Row(verticalAlignment = Alignment.CenterVertically) {
        LabelText("clickable")
        Text(
            "点击", Modifier
                .background(MaterialTheme.colorScheme.primary)
                .clickable {
                    SHOW_APP_TOAST("点击")
                }, color = MaterialTheme.colorScheme.onPrimary
        )
    }

    Row(verticalAlignment = Alignment.CenterVertically) {
        LabelText("onKeyEvent")
        Text("取得焦点时监听按键",
            Modifier
                .background(MaterialTheme.colorScheme.primary)
                .onPreviewKeyEvent {//先于onKeyEvent执行在父组件中返回true时可以拦截子组件处理onKeyEvent
                    SHOW_APP_TOAST("onPreviewKeyEvent：${it.type} ${it.key.keyCode}")
                    true
                }
                .onKeyEvent {
                    SHOW_APP_TOAST("onKeyEvent：${it.type} ${it.key.keyCode}")
                    true
                }
                .focusable(true),
            color = MaterialTheme.colorScheme.onPrimary)
    }
    LabelText("pointerInput 单指手势（按下、轻触、双击、长按）")
    val xPos = remember { mutableFloatStateOf(0f) }
    val yPos = remember { mutableFloatStateOf(0f) }
    Box(
        Modifier
            .size(300.dp)
            .pointerInput(Unit) {
                detectTapGestures(
                    {
                        xPos.floatValue = it.x
                        yPos.floatValue = it.y
                        SHOW_APP_TOAST("双击")
                    },
                    {
                        xPos.floatValue = it.x
                        yPos.floatValue = it.y
                        SHOW_APP_TOAST("长按")
                    },
                    {
                        xPos.floatValue = it.x
                        yPos.floatValue = it.y
                        SHOW_APP_TOAST("按下")
                    },
                    onTap = {
                        xPos.floatValue = it.x
                        yPos.floatValue = it.y
                        SHOW_APP_TOAST("轻触")
                    })
            }
            .border(2.dp, MaterialTheme.colorScheme.primary)
            .focusable(true),
    ) {
        Box(
            Modifier
                .width(1.dp)
                .fillMaxHeight()
                .offset(offset = { return@offset IntOffset(xPos.floatValue.toInt(), 0) })
                .background(MaterialTheme.colorScheme.primary)
        )
        Box(
            Modifier
                .height(1.dp)
                .fillMaxWidth()
                .offset(offset = { return@offset IntOffset(0, yPos.floatValue.toInt()) })
                .background(MaterialTheme.colorScheme.primary)
        )
        Text(
            "(${xPos.floatValue.toInt()},${yPos.floatValue.toInt()})",
            Modifier.offset(offset = {
                return@offset IntOffset(
                    xPos.floatValue.toInt(),
                    yPos.floatValue.toInt()
                )
            })
        )
    }
}

class ModifierData {
    companion object : Destination("ModifierPage")
}

@Composable
fun ModifierPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("Compose组件通过Modifier来修改样式，，以下以常见需求举例")
        Size()
        LargeSpacer()

        Padding()
        LargeSpacer()

        Background()
        LargeSpacer()

        Border()
        LargeSpacer()

        Transform()
        LargeSpacer()

        Event()
        LargeSpacer()
    }
}
